<template>
  <div class="body">
    <div class="app-container">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <div id="opt" style="float: left">
            <el-radio-group v-model="opt" size="mini" @change="selectChange">
              <el-radio-button label="日历显示" />
              <el-radio-button label="列表显示" />
            </el-radio-group>
          </div>
        </div>
        <div>
          <el-card v-show="opt === '日历显示'" class="box-card" shadow="hover">
            <Cal ref="schedule" />
          </el-card>
          <el-card v-show="opt === '列表显示'" class="box-card" shadow="hover">
            <ListIndex ref="listIndex" />
          </el-card>
        </div>
      </el-card>

    </div>
  </div>
</template>
<script>

import ListIndex from './list'
import Cal from './cal'

export default {
  name: 'RealtimeTank',
  components: { ListIndex, Cal },
  mixins: [],
  data() {
    return {
      opt: '日历显示'
    }
  },
  mounted() {

  },
  beforeDestroy() {

  },
  methods: {
    selectChange(val) {
      if (val === '日历显示') { this.$refs.schedule.initData() } else if (val === '列表显示') { this.$refs.listIndex.crud.toQuery() }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .body{
   min-width: 1366px;
  }
  .el-card__header {
    padding: 10px 10px;
    border-bottom: 1px solid #e6ebf5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
</style>
